<template>
	<!-- 模态框 -->
	<view>
		<view class="warp" v-if="loginList">
			<view class="warp-view">
				<view class="warp-text">请登录在绑定</view>
				<view class="warp-flex">
					<button plain="true" @click="messcancel">取消</button>
					<button plain="true" open-type="getUserInfo" @getuserinfo="getUserInfo">去登录</button>
				</view>
			</view>
		</view>
		<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages>
	</view>
</template>

<script>
	import HMmessages from "@/components/HM-messages/HM-messages.vue"
	import {
		login
	} from '../common/list.js'
	export default {
		components: {
			HMmessages
		},
		name: "modals",
		data() {
			return {
				loginList: true
			}
		},
		methods: {
			getUserInfo(event) {
				this.loginList = false
				let user = event.detail.userInfo
				login(user)
					.then((res) => {
						console.log(res)
						console.log('登录成功')
						let tip = '登录成功'
						let icon = 'success'
						this.proMpt(tip, icon)
					})
					.catch((err) => {
						console.log(err)
					})
			},
			proMpt(tip, icon) {
				this.HMmessages.show(tip, {
					icon: icon
				})
			},
			messcancel() {
				let tip = '用户取消登录'
				let icon = 'error'
				this.proMpt(tip, icon)
				this.loginList = false
			},
		},
		onLoad() {
			this.getUserInfo()
		}

	}
</script>

<style>
	.warp {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9999;
	}

	.warp-view {
		width: 500upx;
		height: 200upx;
		background: #FFFFFF;
		margin: auto;
		position: absolute;
		-webkit-position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: 8upx;
		overflow: hidden;
	}

	.warp-text {
		text-align: center;
		margin-top: 30upx;
		font-size: 34upx;
		color: #666666;
	}

	.warp-flex {
		display: flex;
		justify-content: space-around;
		border-top: 1upx solid #EEEEEE;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 80upx;
		line-height: 80upx;
		-webkit-transform: translateZ(0);
	}

	.warp-flex button {
		border: none;
		font-size: 30upx;
	}
</style>
